var fram = document.getElementById("fram");
var play_video_btn = document.querySelector(".m-video-open");
var header = document.querySelector(".m-header").querySelector("header");
var logo = document.querySelector(".logo");
var poster = document.querySelector(".m-poster-badge"); 
var overlay = document.querySelector(".v-modal-overlay");
var outlay = document.querySelector(".v-modal-background-click");
var m_pv = document.querySelector('.m-pv');
var clickvideo = document.getElementById("videoPv");
var menu = document.querySelector(".header-menu");
var toggle_btn = document.querySelector(".header-toggle");
var close_btn = document.querySelector(".menu-close");
var landscape = document.querySelector(".mihoyo-landscape");

var c =()=>{
    let w = document.documentElement.clientWidth;
    let h = document.documentElement.clientHeight;
    let n = (20*(w/460)>40?40+"px":(20*(w/320)+"px"));
    let img_widths = document.querySelectorAll(".swiper-slide");
    document.documentElement.style.fontSize=n;
    fram.style.width = w+"px";
    fram.style.height = h+"px";
    m_pv.style.width = w+"px";
    m_pv.style.top = ((h/2)-(h/5.8))+"px";
    if(w > h){
        landscape.style.display = "block"
    }else{
        landscape.style.display = "none"
    }
    for (let index = 0; index < img_widths.length; index++) {
        img_widths[index].style.width = w-(w/6.65)+"px"
    }
    width = document.querySelector('.swiper-slide').clientWidth;//图片的宽度
    setTranslateX(-index * width);
}
var PlayVideo =()=> {
    overlay.style.display = "block";
    clickvideo.play();
}
var PauseVideo =()=> {
    overlay.style.display = "none";
    clickvideo.pause();
    clickvideo.currentTime = 0
}
var TabEvent =()=>{
    let postertop = poster.getBoundingClientRect().top;
    if(postertop > -30){
        header.className = "";
        logo.style.display = "block";
    }else{
        header.className = "active";
        logo.style.display = "none";
    }
    // console.log(postertop);
}
var OpenRightTab =()=>{
    menu.className = "header-menu active";
}
var OutRightTab =()=>{
    menu.className = "header-menu";
}

addEventListener("load",c);
addEventListener("resize",c);
play_video_btn.addEventListener("click", PlayVideo);
outlay.addEventListener("click", PauseVideo);
toggle_btn.addEventListener("click", OpenRightTab);
close_btn.addEventListener("click", OutRightTab);

// document.getElementsByTagName('section')[0].addEventListener('touchmove',TabEvent);
// document.getElementsByTagName('section')[0].addEventListener('touchend', TabEvent);
// document.getElementsByTagName('section')[0].addEventListener("touchstart", TabEvent);
// document.getElementsByTagName('section')[0].addEventListener("mousewheel", TabEvent);

timertab = setInterval(function(){
    TabEvent();
},150);





// 轮播图

//fader_ul.style.transform = 'translate3d(-'+san_li[1].clientWidth+'px, 0, 0)'; 
var imageCount = 4; //页面中用来轮播的图片有5张
var banner = document.querySelector('.swiper-container');//轮播图大盒子
var width = document.querySelector('.swiper-slide').clientWidth;//图片的宽度
var imageBox = document.querySelector(".swiper-wrapper");//图片盒子
var pointBox = document.querySelector(".m-news-pager");//点盒子
var points = pointBox.querySelectorAll('li');//所有的点
//console.log(width);
//公用方法
//加过渡滑动动画（CSS3 transition 属性）（根据需要可添加ease,linear等属性）
var addTransition = function(){
    imageBox.style.transition = "all 0.3s";
    imageBox.style.webkitTransition = "all 0.3s";
};
//清除过渡（清除图片的 transition 属性）
var removeTransition = function(){
    imageBox.style.transition = "none";
    imageBox.style.webkitTransition = "none";
}
//设置图片的位置，定位（CSS3 transform 属性）
var setTranslateX = function(translateX){
    imageBox.style.transform = "translateX("+translateX+"px)";
    imageBox.style.webkitTransform = "translateX("+translateX+"px)";
    //console.log(width);
}
//改变当前样式  当前图片的索引（小圆点）
var setPoint = function(){
    //清除上一次的now
    for(var i = 0 ; i < points.length ; i++){
        points[i].className = 'm-news-pager-item'
    }
    //给图片对应的点加上样式
    points[index-1].className = "m-news-pager-item m-news-pager-item-active";
}

//自动轮播  定时器  无缝衔接  动画结束瞬间定位
var index = 1;
var timer = setInterval(function(){
    index++;		//自动轮播到下一张
    //改变定位  动画的形式去改变  transition transform translate
    addTransition();    //加过渡动画
    setTranslateX(-index * width);  //定位
    if(index > imageCount)
        index = 1;
    setPoint();
    TabEvent();
},3500);//设置每隔3.5秒切换一次

//等过渡结束之后来做无缝衔接
my.transitionEnd(imageBox, function(){
    removeTransition(); //清除过渡
    setTranslateX(-index * width);  //定位
});



/*
    手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
    当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
    当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
    */
//touch事件
var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
var moveX = 0;  //滑动的时候x的位置
var distanceX = 0;  //滑动的距离
var isMove = false; //是否滑动过

imageBox.addEventListener('touchstart', function(e){
    clearInterval(timer);   //清除定时器
    startX = e.touches[0].clientX;  //记录起始X
    event.preventDefault();
});

imageBox.addEventListener('touchmove',function(e){
    moveX = e.touches[0].clientX;   //滑动时候的X
    distanceX = moveX - startX; //计算移动的距离
    //计算当前定位  -index*width+distanceX
    removeTransition(); //清除过渡
    setTranslateX(-index * width + distanceX);  //实时的定位
    isMove = true;  //证明滑动过
});

//在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
imageBox.addEventListener('touchend', function(e){
    // 滑动超过 1/4 即为滑动有效，否则即为无效，则吸附回去
    if(isMove && Math.abs(distanceX) > width/4){
        //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
        if(distanceX > 0){  //上一张
            index --;
        }
        else{   //下一张
            index ++;
        }
    }
    addTransition();    //加过渡动画
    setTranslateX(-index * width);    //定位

    if(index > imageCount ){
        index = 1;
    }else if(index <= 0){
        index = imageCount;
    }
    setPoint();

    //重置参数
    startX = 0;
    moveX = 0;
    distanceX = 0;
    isMove = false;
    //加定时器
    clearInterval(timer);   //严谨 再清除一次定时器
    timer = setInterval(function(){
        var width = document.querySelector('.swiper-slide').clientWidth;//图片的宽度
        index++;
        
        addTransition();
        setTranslateX(-index * width);
        
        if(index > imageCount)
            index = 1;
        setPoint();
    },3500);
    
});

var tab_lists = document.querySelector(".m-news-tab-list").querySelectorAll("li");
var news_list = document.querySelector(".m-news-list").querySelectorAll("li");
tab_lists[0].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 1; i < tab_lists.length; i++){
        tab_lists[i].className = "m-news-tab-item"
    }
})
tab_lists[1].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i+5]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i+5]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 0; i < tab_lists.length; i++){
        if(i != 1){
            tab_lists[i].className = "m-news-tab-item" 
        }
    }
})
tab_lists[2].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i+10]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i+10]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 0; i < tab_lists.length; i++){
        if(i != 2){
            tab_lists[i].className = "m-news-tab-item" 
        }
    }
})
tab_lists[3].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i+15]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i+15]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 0; i < tab_lists.length; i++){
        if(i != 3){
            tab_lists[i].className = "m-news-tab-item" 
        }
    }
})

var fram = document.getElementById("fram");
var play_video_btn = document.querySelector(".m-video-open");
var header = document.querySelector(".m-header").querySelector("header");
var logo = document.querySelector(".logo");
var poster = document.querySelector(".m-poster-badge"); 
var overlay = document.querySelector(".v-modal-overlay");
var outlay = document.querySelector(".v-modal-background-click");
var m_pv = document.querySelector('.m-pv');
var clickvideo = document.getElementById("videoPv");
var menu = document.querySelector(".header-menu");
var toggle_btn = document.querySelector(".header-toggle");
var close_btn = document.querySelector(".menu-close");
var landscape = document.querySelector(".mihoyo-landscape");

var c =()=>{
    let w = document.documentElement.clientWidth;
    let h = document.documentElement.clientHeight;
    let n = (20*(w/460)>40?40+"px":(20*(w/320)+"px"));
    let img_widths = document.querySelectorAll(".swiper-slide");
    document.documentElement.style.fontSize=n;
    fram.style.width = w+"px";
    fram.style.height = h+"px";
    m_pv.style.width = w+"px";
    m_pv.style.top = ((h/2)-(h/5.8))+"px";
    if(w > h){
        landscape.style.display = "block"
    }else{
        landscape.style.display = "none"
    }
    for (let index = 0; index < img_widths.length; index++) {
        img_widths[index].style.width = w-(w/6.65)+"px"
    }
    width = document.querySelector('.swiper-slide').clientWidth;//图片的宽度
    setTranslateX(-index * width);
}
var PlayVideo =()=> {
    overlay.style.display = "block";
    clickvideo.play();
}
var PauseVideo =()=> {
    overlay.style.display = "none";
    clickvideo.pause();
    clickvideo.currentTime = 0
}
var TabEvent =()=>{
    let postertop = poster.getBoundingClientRect().top;
    if(postertop > -30){
        header.className = "";
        logo.style.display = "block";
    }else{
        header.className = "active";
        logo.style.display = "none";
    }
    // console.log(postertop);
}
var OpenRightTab =()=>{
    menu.className = "header-menu active";
}
var OutRightTab =()=>{
    menu.className = "header-menu";
}

addEventListener("load",c);
addEventListener("resize",c);
play_video_btn.addEventListener("click", PlayVideo);
outlay.addEventListener("click", PauseVideo);
toggle_btn.addEventListener("click", OpenRightTab);
close_btn.addEventListener("click", OutRightTab);

// document.getElementsByTagName('section')[0].addEventListener('touchmove',TabEvent);
// document.getElementsByTagName('section')[0].addEventListener('touchend', TabEvent);
// document.getElementsByTagName('section')[0].addEventListener("touchstart", TabEvent);
// document.getElementsByTagName('section')[0].addEventListener("mousewheel", TabEvent);

timertab = setInterval(function(){
    TabEvent();
},150);





// 轮播图

//fader_ul.style.transform = 'translate3d(-'+san_li[1].clientWidth+'px, 0, 0)'; 
var imageCount = 4; //页面中用来轮播的图片有5张
var banner = document.querySelector('.swiper-container');//轮播图大盒子
var width = document.querySelector('.swiper-slide').clientWidth;//图片的宽度
var imageBox = document.querySelector(".swiper-wrapper");//图片盒子
var pointBox = document.querySelector(".m-news-pager");//点盒子
var points = pointBox.querySelectorAll('li');//所有的点
//console.log(width);
//公用方法
//加过渡滑动动画（CSS3 transition 属性）（根据需要可添加ease,linear等属性）
var addTransition = function(){
    imageBox.style.transition = "all 0.3s";
    imageBox.style.webkitTransition = "all 0.3s";
};
//清除过渡（清除图片的 transition 属性）
var removeTransition = function(){
    imageBox.style.transition = "none";
    imageBox.style.webkitTransition = "none";
}
//设置图片的位置，定位（CSS3 transform 属性）
var setTranslateX = function(translateX){
    imageBox.style.transform = "translateX("+translateX+"px)";
    imageBox.style.webkitTransform = "translateX("+translateX+"px)";
    //console.log(width);
}
//改变当前样式  当前图片的索引（小圆点）
var setPoint = function(){
    //清除上一次的now
    for(var i = 0 ; i < points.length ; i++){
        points[i].className = 'm-news-pager-item'
    }
    //给图片对应的点加上样式
    points[index-1].className = "m-news-pager-item m-news-pager-item-active";
}

//自动轮播  定时器  无缝衔接  动画结束瞬间定位
var index = 1;
var timer = setInterval(function(){
    index++;		//自动轮播到下一张
    //改变定位  动画的形式去改变  transition transform translate
    addTransition();    //加过渡动画
    setTranslateX(-index * width);  //定位
    if(index > imageCount)
        index = 1;
    setPoint();
    TabEvent();
},3500);//设置每隔3.5秒切换一次

//等过渡结束之后来做无缝衔接
my.transitionEnd(imageBox, function(){
    removeTransition(); //清除过渡
    setTranslateX(-index * width);  //定位
});



/*
    手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
    当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
    当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
    */
//touch事件
var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
var moveX = 0;  //滑动的时候x的位置
var distanceX = 0;  //滑动的距离
var isMove = false; //是否滑动过

imageBox.addEventListener('touchstart', function(e){
    clearInterval(timer);   //清除定时器
    startX = e.touches[0].clientX;  //记录起始X
    event.preventDefault();
});

imageBox.addEventListener('touchmove',function(e){
    moveX = e.touches[0].clientX;   //滑动时候的X
    distanceX = moveX - startX; //计算移动的距离
    //计算当前定位  -index*width+distanceX
    removeTransition(); //清除过渡
    setTranslateX(-index * width + distanceX);  //实时的定位
    isMove = true;  //证明滑动过
});

//在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
imageBox.addEventListener('touchend', function(e){
    // 滑动超过 1/4 即为滑动有效，否则即为无效，则吸附回去
    if(isMove && Math.abs(distanceX) > width/4){
        //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
        if(distanceX > 0){  //上一张
            index --;
        }
        else{   //下一张
            index ++;
        }
    }
    addTransition();    //加过渡动画
    setTranslateX(-index * width);    //定位

    if(index > imageCount ){
        index = 1;
    }else if(index <= 0){
        index = imageCount;
    }
    setPoint();

    //重置参数
    startX = 0;
    moveX = 0;
    distanceX = 0;
    isMove = false;
    //加定时器
    clearInterval(timer);   //严谨 再清除一次定时器
    timer = setInterval(function(){
        var width = document.querySelector('.swiper-slide').clientWidth;//图片的宽度
        index++;
        
        addTransition();
        setTranslateX(-index * width);
        
        if(index > imageCount)
            index = 1;
        setPoint();
    },3500);
    
});

var tab_lists = document.querySelector(".m-news-tab-list").querySelectorAll("li");
var news_list = document.querySelector(".m-news-list").querySelectorAll("li");
tab_lists[0].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 1; i < tab_lists.length; i++){
        tab_lists[i].className = "m-news-tab-item"
    }
})
tab_lists[1].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i+5]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i+5]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 0; i < tab_lists.length; i++){
        if(i != 1){
            tab_lists[i].className = "m-news-tab-item" 
        }
    }
})
tab_lists[2].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i+10]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i+10]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 0; i < tab_lists.length; i++){
        if(i != 2){
            tab_lists[i].className = "m-news-tab-item" 
        }
    }
})
tab_lists[3].addEventListener("click", function(){
    var data = fetch('../data/02-news.json',{
        method:"GET"
    }).then((response) => response.json()).then((json) => {
        var j = 0;
        for(var i = 0; i < 5; i++){
            news_list[j].querySelector("a").querySelector(".m-news-title").innerText = json["data"]["list"][i+15]["title"];
            news_list[j].querySelector("a").querySelector(".m-news-date").innerText = json["data"]["list"][i+15]["start_time"].slice(0, 10);
            if(i < 4){j++}
        }
    })
    this.className = "m-news-tab-item m-news-tab-item-active"
    for(var i = 0; i < tab_lists.length; i++){
        if(i != 3){
            tab_lists[i].className = "m-news-tab-item" 
        }
    }
})

